<template>
  <div
    class="form-content"
    v-html="innerText"
    :contenteditable="true"
    @focus="focusContent"
    @blur="blurContent"
    @input="changeText"
  ></div>
</template>
<script >
export default {
  name: "editDiv",
  props: {
    value: {
      type: String,
      default: ""
    }, 
  },
  data() {
    return {
      innerText: this.value,
      isLocked: false
    };
  },
  watch: {
    value() {
      if (!this.isLocked || !this.innerText) {
        this.innerText = this.value;
      }
    }
  },
  methods: {
    focusContent() {
      this.isLocked = true ;
      this.$emit("focusContent", this.$el.innerHTML);
    },
    blurContent() {
      this.isLocked = false ;
      this.$emit("blurContent", this.$el.innerHTML);
    },
    changeText() {
      this.$emit("input", this.$el.innerHTML);
    }
  }
};
</script>
<style lang="scss">
.form-content {
  width: 100%;
  min-height: 200px; 
  -webkit-user-select: text;
  outline: none;
  padding:50px 10px ;
  position: relative; 
  z-index: 9;
  img {
    width: 100%;
    margin: 10px auto;
    background:url("~@/assets/images/image_default.png") no-repeat  center;
    background-size: cover; 
  } 
  video {
    width: 100%;
    height: 100%;
  }
}
</style>